<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./modules/preact/dist/preact.min.umd.js"></script>
    <script src="./modules/preact/hooks/dist/hooks.umd.js"></script> -->
</head>
<script type="module">
    import { h, render, Component }  from "./lib/preact.js";
    import ClockX from './components/Test.js'
    //const { h, render, Component } = preact;
    //const { useState, useEffect, useCallback } = preactHooks;
    JSX = h;
class App extends Component {
  state = { time: Date.now() };

  // Called whenever our component is created
  componentDidMount() {
    // update time every second
    this.timer = setInterval(() => {
      this.setState({ time: Date.now() });
    }, 1000);
  }

  // Called just before our component will be destroyed
  componentWillUnmount() {
    // stop when not renderable
    clearInterval(this.timer);
  }

  render() {
    let time = new Date(this.state.time).toLocaleTimeString();
    return <div><span>{time}</span><p><ClockX></ClockX></p></div>;
  }
}

render(<App />, document.getElementById("app"));
</script>
<body>
    <div id="app"></div>
</body>
</html>